<template>
  <div class="creditData-container">
    <div
      v-if="detail?.flowStatus!=='AGREE'"
      class="status-container"
      style="margin-bottom:  10px;"
    >
      <el-alert
        :title="creditStatusTitle"
        :type="detail?.creditStatus==='2'?'success':'warning'"
        show-icon
        :closable="false"
      />
    </div>

    <div
      class="quota-container"
      style="padding: 20px 0px"
    >
      <div><span>应收最大额度：</span><span>{{ detail?.quota > 0 ? detail.quota : '不限额' }}</span><span v-if="detail?.quota > 0">元</span></div>
    </div>
    <div class="stock">
      <el-table
        :data="listData"
        :border="true"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="productPopularName"
          label="通用名"
          :min-width="140"
          show-overflow-tooltip
          header-align="center"
        >
          <template #default="scope">
            {{ scope.row.productInfoDetail.productPopularName }}
          </template>
        </el-table-column>
        <el-table-column
          prop="approvalNumber"
          label="批准文号"
          :min-width="130"
          show-overflow-tooltip
          header-align="center"
        >
          <template #default="scope">
            {{ scope.row.productInfoDetail.approvalNumber }}
          </template>
        </el-table-column>
        <el-table-column
          prop="packSpecs"
          label="包装规格"
          :min-width="100"
          show-overflow-tooltip
          header-align="center"
        >
          <template #default="scope">
            {{ scope.row.productInfoDetail.packSpecs }}
          </template>
        </el-table-column>
        <el-table-column
          prop="producer"
          label="生产厂家"
          :min-width="100"
          show-overflow-tooltip
          header-align="center"
        >
          <template #default="scope">
            {{ scope.row.productInfoDetail.producer }}
          </template>
        </el-table-column>
        <el-table-column
          prop="sellUnit"
          label="计价单位"
          header-align="center"
          align="center"
          :min-width="100"
          show-overflow-tooltip
        >
          <template #default="scope">
            {{ getLabel('sell_unit',scope.row.productInfoDetail.sellUnit) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="capacity"
          label="允许最大库存上限"
          header-align="center"
        >
          <template #default="scope">
            <div>
              <span v-if="scope.row.capacity ===0">不限</span>
              <span v-else>{{ scope.row.capacity }}</span>
            </div>
          </template>
        </el-table-column>

      </el-table>
      <Pagination
        v-model:page="filterData.page"
        v-model:limit="filterData.pageSize"
        style="display: flex; justify-content: flex-end"
        :total="total"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import {defineComponent, getCurrentInstance, inject, reactive, toRefs, watch,} from 'vue'
import {useRoute} from 'vue-router'

export default defineComponent({
  props: {
    detail: {
      type: Object,
      default: () => {},
    },
    mode: {
      type: String,
      default: 'distribute',
    },
  },
  setup(props, context) {
    const route = useRoute()
    const api = inject('api')
    const currentInstance = getCurrentInstance()
    var reactiveData = reactive({
      relationId: route.query.id ? Number(route.query.id) : 0,
      detail: props.detail,
      creditStatusTitle: '',
      quota: 0,
      total: 0,
      filterData: {
        page: 1,
        pageSize: 20,
      },
      formData: {},
      listData: [],
    })
    const getList = () => {
      api.common
        .CREDIT_PRODUCT_LIST({
          relationId: reactiveData.relationId,
          creditType: props.mode,
        })
        .then((res) => {
          if (res.code === 0) {
            reactiveData.listData = res.data.list
            reactiveData.total = res.data.total
            reactiveData.quota = res.data.quota
          }
        })
    }
    watch(
      () => props.detail,
      (newval, oldval) => {
        if (newval) {
          reactiveData.creditStatusTitle = currentInstance.proxy.getLabel(
            'approval_result',
            newval.flowStatus
          )
          reactiveData.detail = newval
          getList()
        }
      },
      { immediate: true }
    )
    return {
      ...toRefs(reactiveData),
      getList,
    }
  },
})
</script>

